<template>
  <div>
    <!--按钮组-->
    <h3>按钮组</h3>
    <ButtonGroup selectionMode="multiple">
      <LinkButton iconCls="icon-add" :toggle="true" :selected="true">Add</LinkButton>
      <LinkButton iconCls="icon-remove" :toggle="true">Remove</LinkButton>
      <LinkButton iconCls="icon-save" :toggle="true">Save</LinkButton>
      <LinkButton iconCls="icon-cut" :disabled="true">Cut</LinkButton>
    </ButtonGroup>
    <br>
    <h3>数据表格</h3>
    <DataGrid :data="User.rows" style="height:250px">
      <GridColumn field="userName" title="姓名"></GridColumn>
      <GridColumn field="employeeNo" title="工号"></GridColumn>
      <GridColumn field="managerNo" title="直属主管" align="left"></GridColumn>
      <GridColumn field="email" title="邮箱" align="left"></GridColumn>
      <GridColumn field="hrOrgNo" title="部门编号" align="left"></GridColumn>
      <GridColumn field="hrOrgName" title="部门" align="left"></GridColumn>
      <GridColumn field="jobTitleCn" title="职位" align="left"></GridColumn>
      <GridColumn field="opt" title="操作" align="left"></GridColumn>
    </DataGrid>
    <p>Total: {{ User.total }}</p>
    <br>
    <!--    树-->
    <h3>树</h3>
    <Tree :data="treeData" @selectionChange="treeSelectChange" :selectLeafOnly="false" :checkbox="false"
          :cascadeCheck="true"
    ></Tree>
    <p v-if="true">选择: {{ treeValue }}</p>
    <br>
    <!--    消息窗户-->
    <h3>消息窗口</h3>
    <button onclick="alert('alert')">alert</button>
    <button onclick="confirm('confirm')">confirm</button>
    <button onclick="prompt('prompt')">prompt</button>
    <button @click="alert2('alert')">alert2</button>
    <button @click="confirm2('confirm')">confirm2</button>
    <button @click="prompt2('prompt')">prompt2</button>
    <br>
    <h3>下拉列表</h3>
    <Label for="c1" align="top">选择一个值:</Label>
    <ComboBox inputId="c1" v-model=selectValue valueField="value" textField="label" :data="selectData"></ComboBox>
    <p v-if="selectValue">选择值: {{ selectValue }}</p>
    <br>
    <h3>时间微调</h3>
    <TimeSpinner placeholder="Select a time"
                 v-model="time"
                 min="08:30"
                 max="18:10">
    </TimeSpinner>
    <p v-if="time">选择: {{ time }}</p>
    <br>
    <h3>基本表单</h3>
    <Form ref="form" :model="user" :rules="rules" @validate="errors=$event">
      <div style="margin-bottom:20px">
        <Label for="name" align="top">Name:</Label>
        <TextBox inputId="name" name="name" v-model="user.name"></TextBox>
      </div>
      <div style="margin-bottom:20px">
        <Label for="email" align="top">Email:</Label>
        <TextBox inputId="email" name="email" v-model="user.email"></TextBox>
      </div>
      <div style="margin-bottom:20px">
        <Label for="hero" align="top">Select a hero:</Label>
        <ComboBox inputId=hero name="hero" valueField="value" textField="label" :data="heroes"
                  v-model="user.hero"></ComboBox>
      </div>
      <div style="margin-bottom:20px">
        <CheckBox inputId="accept" name="accept" v-model="user.accept"></CheckBox>
        <Label style="width: auto">Accept Me</Label>
      </div>
      <div style="margin-bottom:20px">
        <LinkButton :disabled="false" @click="submitForm()">Submit</LinkButton>
      </div>
    </Form>
    <br>
    <h3>菜单</h3>
    <Menu :inline="true" :noline="true" menuCls="mymenu">
      <MenuItem value="new" text="New"></MenuItem>
      <MenuItem text="Open">
        <SubMenu>
          <MenuItem value="word" text="Word"></MenuItem>
          <MenuItem value="excel" text="Excel"></MenuItem>
          <MenuItem value="ppt" text="PowerPoint"></MenuItem>
        </SubMenu>
      </MenuItem>
      <MenuItem value="save" text="Save" iconCls="icon-save"></MenuItem>
      <MenuItem value="print" text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
      <MenuSep></MenuSep>
      <MenuItem value="exit" text="Exit"></MenuItem>
    </Menu>
    <br>
    <h3>调整大小-Resizable</h3>
    <div v-Resizable="{minWidth:100,minHeight:100}" class="item">
      <div style="padding:20px;text-align:center">Resize Me</div>
    </div>
    <br>
    <h3>拖拽</h3>
    <div class="dragitem" v-Draggable>
      <p style="text-align:center">Drag me</p>
    </div>
    <div class="droparea">
      <p style="text-align:center">Drop here</p>
    </div>
    <br>
    <h3>提示框</h3>
    <span v-Tooltip="'This is a tooltip.'">Hover Me</span>
    <br>
    <h3>单选按钮</h3>
    <div v-for="fruit in fruits" :key="fruit+Math.random()" style="margin-bottom:10px">
      <RadioButton name="group1" :inputId="fruit" :value="fruit" v-model="fruitValue"></RadioButton>
      <Label :for="fruit">{{ fruit }}</Label>
    </div>
    <br>
    <h3>复选框</h3>
    <div v-for="fruit in fruits" :key="fruit+Math.random()" style="margin-bottom:10px">
      <CheckBox :inputId="fruit" :value="fruit" :multiple="true" v-model="fruitValue"></CheckBox>
      <Label :for="fruit">{{ fruit }}</Label>
    </div>
    <p v-if="fruitValue">你选择的是: {{ fruitValue }}</p>
    <br>
    <h3>密码框</h3>
    <div style="margin-bottom:20px">
      <TextBox v-model="username" placeholder="Username" iconCls="icon-man"></TextBox>
    </div>
    <div style="margin-bottom:20px">
      <PasswordBox v-model="password" placeholder="Password"></PasswordBox>
    </div>
    <br>
    <h3>树形表格</h3>
    <h2>Basic TreeGrid</h2>
    <TreeGrid style="height:250px"
              :data="treeFormData" idField="id" treeField="name">
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="size" title="Size"></GridColumn>
      <GridColumn field="date" title="Date"></GridColumn>
    </TreeGrid>
    <br>
    <h3>滑动条</h3>
    <Slider style="width:300px;"
            :value="0"
            :showTip="true"
            :rule="[0,'|',25,'|',50,'|',75,'|',100]">
    </Slider>
    <br>
    <h3>Layout(布局)</h3>
    <Layout style="width:700px;height:250px;">
      <LayoutPanel region="north" style="height:50px;">
        <div class="title">North Region</div>
      </LayoutPanel>
      <LayoutPanel region="south" style="height:50px;">
        <div class="title">South Region</div>
      </LayoutPanel>
      <LayoutPanel region="west" style="width:120px;">
        <div class="title">West Region</div>
      </LayoutPanel>
      <LayoutPanel region="east" style="width:120px;">
        <div class="title">East Region</div>
      </LayoutPanel>
      <LayoutPanel region="center" style="height:100%">
        <div class="title">Center Region</div>
      </LayoutPanel>
    </Layout>
    <br>
    <h3>Dialog(对话框窗口)</h3>
    <Dialog ref="d1"
            :title="'Draggable And Resizable'"
            :dialogStyle="{width:'400px',height:'200px'}"
            :modal="true"
            :draggable="true"
            :resizable="true">
      <p style="text-align:center;margin:50px 0;font-size:16px">对话框内容。</p>
    </Dialog>
    <br>
    <h3>TextBox(文本框)</h3>
    <div style="margin-bottom:10px;display:inline-block;margin-right:1em">
      <Label for="t1" align="top">First Name:</Label>
      <TextBox inputId="t1" v-model="fname" iconCls="icon-man" placeholder="First name"></TextBox>
    </div>
    <div style="margin-bottom:10px;display:inline-block">
      <Label for="t2" align="top">Last Name:</Label>
      <TextBox inputId="t2" v-model="lname" placeholder="Last name"></TextBox>
    </div>
    <br>
    <h3>ProgressBar(进度条)</h3>
    <div style="margin-bottom:20px">
      <ProgressBar :value="40" :showValue="true"></ProgressBar>
    </div>
    <div style="margin-bottom:20px">
      <ProgressBar :value="70" :showValue="false">Processing 70%</ProgressBar>
    </div>
    <div style="margin-bottom:20px">
      <div style="text-align:right">50%</div>
      <ProgressBar :value="50" :showValue="false" barCls="c6" style="height:4px"></ProgressBar>
    </div>
    <br>
    <h3>ComboBase(基本自定义下拉框) </h3>

    <br>
    <h3>ListBase(基本列表)</h3>
    <h2>Virtual Scroll - Lazy Load</h2>
    <DataList style="width:600px;height:250px"
              :data="data"
              :total="total"
              :virtualScroll="true"
              :rowHeight="75"
              :lazy="true"
              :loading="loading"
              :pageNumber="pageNumber"
              :pageSize="pageSize"
              idField="inv"
              selectionMode="single"
              @selectionChange="selection=$event"
              @pageChange="onPageChange($event)">
      <template slot-scope="scope">
        <div class="product">
          <div class="num">{{ scope.rowIndex + 1 }}</div>
          <div class="detail">
            <p>{{ scope.row.inv }} - {{ scope.row.name }}</p>
            <p>Amount: {{ scope.row.amount }}</p>
            <p>Price: {{ scope.row.price }}</p>
          </div>
        </div>
      </template>
    </DataList>
    <p v-if="selection">You selected: {{ selection.name }}</p>
    <br>
    <h3>DateTimeSpinner(日期时间微调框)</h3>
    <Label for="t1">开始:</Label>
    <DateTimeSpinner inputId="t1" v-model="dateTime"></DateTimeSpinner>
    <br>
    <h3>SplitButton(分割按钮)</h3>
    <SplitButton text="Help" :plain="true" iconCls="icon-help">
      <Menu>
        <MenuItem text="Help"></MenuItem>
        <MenuItem text="Update"></MenuItem>
        <MenuItem text="About"></MenuItem>
      </Menu>
    </SplitButton>
    <br>
    <h3>Panel面板 + Pagination(分页)</h3>
    <Panel :bodyStyle="{padding:'20px'}">
      <p>Total: {{ total }}</p>
      <p>Page Number: {{ pageNumber }}</p>
      <p>Page Size: {{ pageSize }}</p>
      <template slot="footer">
        <Pagination :total="total" :pageSize="pageSize" :pageNumber="pageNumber"
                    @pageChange="onPageChange($event)"></Pagination>
      </template>
    </Panel>
    <br>
    <h3>LayoutPanel(布局面板) </h3>
    <Layout style="width:700px;height:250px;">
      <LayoutPanel ref="west" style="width:180px"
                   region="west"
                   headerCls="side-menu-header"
                   bodyCls="f-column"
                   :float="true"
                   :border="false"
                   :collapsed="true">
        <template slot="header">
          <svg class="side-toggle" viewBox="0 0 24 24" @click="$refs.west.collapse()">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
          </svg>
          <span>Side Menu</span>
        </template>
        <div class="side-menu f-full">
          <div class="side-menu-item">
            <div class="side-menu-icon">
              <svg class="side-toggle" viewBox="0 0 24 24">
                <path
                  d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
              </svg>
            </div>
            <div class="side-menu-text">Login</div>
          </div>
          <div class="side-menu-item">
            <div class="side-menu-icon">
              <svg class="side-toggle" viewBox="0 0 24 24">
                <path
                  d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
              </svg>
            </div>
            <div class="side-menu-text">Mark</div>
          </div>
        </div>
      </LayoutPanel>
      <LayoutPanel region="center" headerCls="main-header" style="height:100%">
        <template slot="header">
          <svg class="side-toggle" viewBox="0 0 24 24" @click="$refs.west.expand()">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
          </svg>
          <span>Main Title</span>
        </template>
        <div style="margin-top:50px;text-align:center;font-size:16px">
          <p>Click the top menu icon to expand the side panel.</p>
        </div>
      </LayoutPanel>
    </Layout>
    <br>
    <h3>ComboTree(组合树)</h3>
    <ComboTree :data="comboTreeData" valueField="id" textField="text" v-model="comboTreeValue"
               placeholder="Select a node">
      <Tree slot="tree"></Tree>
    </ComboTree>
    <p v-if="comboTreeValue">You selected: {{ comboTreeValue }}</p>
    <br>
    <h3>TabPanel(选项卡面板)</h3>
    <Tabs :scrollable="true" style="width:600px;height:250px">
      <TabPanel v-for="lang in languages" :key="lang" :title="lang" :closable="true">
        <div style="padding:20px">{{ lang }}</div>
      </TabPanel>
    </Tabs>
    <br>
    <h3>AccordionPanel(分类面板)</h3>
    <div style="margin-bottom:10px">
      <LinkButton iconCls="icon-add" @click="add()">Add</LinkButton>
      <LinkButton iconCls="icon-remove" @click="remove()">Remove</LinkButton>
    </div>
    <Accordion ref="acc" :selectedIndex="selectedIndex" style="height:250px">
      <AccordionPanel v-for="p in panels" :title="p.title" :key="p.title">
        <p>{{ p.content }}</p>
      </AccordionPanel>
    </Accordion>
    <br>
    <h3>Calendar(日历)</h3>
    <Calendar :selection="calendarValue" :firstDay="firstDay" @selectionChange="calendarChange"
              style="width:250px;height:250px"></Calendar>
    <p v-if="calendarValue">{{ calendarValue | formatDate }}</p>
    <br>
    <h3>SideMenu(侧栏菜单)</h3>
    <LinkButton @click="sideMenuToggle()" style="margin-bottom:20px">Toggle</LinkButton>
    <SideMenu :style="{width:sideMenuWidth+'px'}"
              :data="menus"
              :collapsed="collapsed"
              @selectionChange="selection=$event">
    </SideMenu>
    <p v-if="selection">You selected: {{ selection.text }}</p>
    <br>
    <h3>ComboGrid(数据表格下拉框)</h3>
    <ComboGrid
      valueField="itemid"
      textField="name"
      v-model="comboGridValue"
      :data="comboGridData"
      :panelStyle="{width:'500px'}">
      <DataGrid slot="grid" :border="false">
        <GridColumn field="itemid" title="Item ID"></GridColumn>
        <GridColumn field="name" title="Name"></GridColumn>
        <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
        <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
        <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
        <GridColumn field="status" title="Status" align="center"></GridColumn>
      </DataGrid>
    </ComboGrid>
    <br>
    <h3>DateBox(日期输入框)</h3>
    <DateBox v-model="calendarValue"></DateBox>
    <p v-if="calendarValue">{{calendarValue | formatDate}}</p>
    <br>
    <h3>TagBox(标签框)</h3>
    <TagBox v-model="tagBoxValue" style="width:300px;"
            valueField="id"
            textField="text"
            placeholder="Select a Language"
            :limitToList="true"
            :hasDownArrow="true"
            :data="tagBoxData">
    </TagBox>
    <br>
    <h3>SwitchButton(开关按钮)</h3>
    <div class="fitem">
      <Label for="s1">接收邮件:</Label>
      <SwitchButton inputId="s1" v-model="received"></SwitchButton>
    </div>
    <div class="fitem">
      <Label for="s2">分享网络:</Label>
      <SwitchButton inputId="s2" v-model="shared"></SwitchButton>
    </div>
    <div class="fitem">
      <Label for="s3">订阅:</Label>
      <SwitchButton inputId="s3" v-model="subscribed"></SwitchButton>
    </div>
    <br>
    <h3>LinkButton(按钮)</h3>
    <LinkButton iconCls="icon-add">Add</LinkButton>
    <LinkButton iconCls="icon-remove">Remove</LinkButton>
    <LinkButton iconCls="icon-save">Save</LinkButton>
    <LinkButton iconCls="icon-cut" :disabled="true">Cut</LinkButton>
    <br>
    <h3>NumberBox(数字框)</h3>
    <div style="margin-bottom:10px">
      <Label for="n1" align="top">Amount:</Label>
      <NumberBox inputId="n1" :value="100" :spinners="true"></NumberBox>
    </div>
    <div style="margin-bottom:10px">
      <Label for="n2" align="top">List Price:</Label>
      <NumberBox inputId="n2" :value="234.56" :precision="2" :spinners="false"></NumberBox>
    </div>
    <div style="margin-bottom:10px">
      <Label for="n3" align="top">Discount:</Label>
      <NumberBox inputId="n3" :value="60" suffix="%" :spinners="false"></NumberBox>
    </div>
    <br>
    <h3>VirtualScroll(虚拟滚动条)</h3>
    <Panel>
      <VirtualScroll style="height:250px"
                     :data="virtualScrollData"
                     :total="virtualScrollTotal"
                     :pageSize="virtualScrollPageSize"
                     :rowHeight="virtualScrollRowHeight"
                     @update="virtualScrollUpdate">
        <div v-for="item in virtualScrollData" :key="item.id" class="item f-row">
          <div class="num">{{item.id}}</div>
          <div>
            <div class="name">{{item.name}}</div>
            <div class="desp">{{item.desp}}</div>
          </div>
        </div>
      </VirtualScroll>
    </Panel>
    <br>
    <h3>Tabs(选项卡)</h3>
    <Tabs style="height:250px">
      <TabPanel :title="'Tab1'">
        <p>Tab Panel1</p>
      </TabPanel>
      <TabPanel :title="'Tab2'">
        <p>Tab Panel2</p>
      </TabPanel>
      <TabPanel :title="'Tab3'">
        <p>Tab Panel3</p>
      </TabPanel>
      <TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
        <p>这是帮助内容。</p>
      </TabPanel>
    </Tabs>
    <br>
    <h3>MenuButton(菜单按钮)</h3>
    <MenuButton text="Help" :plain="true" iconCls="icon-help">
      <Menu>
        <MenuItem text="Help"></MenuItem>
        <MenuItem text="Update"></MenuItem>
        <MenuItem text="About"></MenuItem>
      </Menu>
    </MenuButton>
    <br>
    <h3>SearchBox(搜索框)</h3>
    <SearchBox style="width:300px"
               placeholder="Input something here"
               v-model="searchBoxValue"
               @search="searchBoxOnSearch">
      <Addon>
        <span v-if="searchBoxValue" class="textbox-icon icon-clear" title="Clear value" @click="searchBoxValue=null"></span>
      </Addon>
      <Menu>
        <MenuItem value="all" text="All News" iconCls="icon-ok"></MenuItem>
        <MenuItem value="sports" text="Sports News" iconCls="icon-man"></MenuItem>
      </Menu>
    </SearchBox>
  </div>
</template>

<script>
export default {
  name: "EmployeeInfo",
  data() {
    return {
      User: {
        rows: [{
          userName: 'test',
          employeeNo: 'test',
          managerNo: 'test',
          email: 'test',
          hrOrgNo: 'test',
          hrOrgName: 'test',
          jobTitleCn: 'test',
          opt: '操作'
        }]
        , total: 100
      },
      treeData: [{id: "1", text: "test1"}, {id: "2", text: "text2"}],
      treeValue: '',
      selectData: [{value: 1, label: "a1"}, {value: 2, label: "a2"}, {value: 3, label: "a3"}],
      selectValue: '',
      time: '',
      user: {name: "老刘", email: "9@qq.com", hero: "", accept: [1, 2, 3]},
      heroes: [{value: 1, label: "hero1"}, {value: 2, label: "hero2"}, {value: 3, label: "hero3"}],
      rules: {
        name: ["required", "length[5,10]"],
        email: "email",
        hero: "required"
      },
      fruits: ["西瓜", "苹果", "香蕉"],
      fruits2: [{fruit: "西瓜", value: "watermelon"}, {fruit: "苹果", value: "apple"}, {fruit: "香蕉", value: "banana"}],
      fruitValue: '',
      password: '',
      username: '',
      treeFormData: [
        {
          id: 1,
          name: "C",
          size: "",
          date: "02/19/2010",
          children: [
            {
              id: 2,
              name: "Program Files",
              size: "120 MB",
              date: "03/20/2010",
              children: [
                {
                  id: 21,
                  name: "Java",
                  size: "",
                  date: "01/13/2010",
                  state: "closed",
                  children: [
                    {
                      id: 211,
                      name: "java.exe",
                      size: "142 KB",
                      date: "01/13/2010"
                    },
                    {
                      id: 212,
                      name: "jawt.dll",
                      size: "5 KB",
                      date: "01/13/2010"
                    }
                  ]
                },
                {
                  id: 22,
                  name: "MySQL",
                  size: "",
                  date: "01/13/2010",
                  state: "closed",
                  children: [
                    {
                      id: 221,
                      name: "my.ini",
                      size: "10 KB",
                      date: "02/26/2009"
                    },
                    {
                      id: 222,
                      name: "my-huge.ini",
                      size: "5 KB",
                      date: "02/26/2009"
                    },
                    {
                      id: 223,
                      name: "my-large.ini",
                      size: "5 KB",
                      date: "02/26/2009"
                    }
                  ]
                }
              ]
            },
            {
              id: 3,
              name: "eclipse",
              size: "",
              date: "01/20/2010",
              children: [
                {
                  id: 31,
                  name: "eclipse.exe",
                  size: "56 KB",
                  date: "05/19/2009"
                },
                {
                  id: 32,
                  name: "eclipse.ini",
                  size: "1 KB",
                  date: "04/20/2010"
                },
                {
                  id: 33,
                  name: "notice.html",
                  size: "7 KB",
                  date: "03/17/2005"
                }
              ]
            }
          ]
        }
      ],
      fname: '',
      lname: '',
      total: 100,
      pageNumber: 1,
      pageSize: 20,
      data: [],
      loading: false,
      selection: null,
      dateTime: '',
      comboTreeValue: '',
      comboTreeData: [
        {
          id: 1,
          text: "My Documents",
          children: [
            {
              id: 11,
              text: "Photos",
              state: "closed",
              children: [
                {
                  id: 111,
                  text: "Friend"
                },
                {
                  id: 112,
                  text: "Wife"
                },
                {
                  id: 113,
                  text: "Company"
                }
              ]
            },
            {
              id: 12,
              text: "Program Files",
              children: [
                {
                  id: 121,
                  text: "Intel"
                },
                {
                  id: 122,
                  text: "Java"
                },
                {
                  id: 123,
                  text: "Microsoft Office"
                },
                {
                  id: 124,
                  text: "Games"
                }
              ]
            },
            {
              id: 13,
              text: "index.html"
            },
            {
              id: 14,
              text: "about.html"
            },
            {
              id: 15,
              text: "welcome.html"
            }
          ]
        }
      ],
      languages: [
        "Basic",
        "Pascal",
        "C++",
        "Java",
        "JavaScript",
        "Fortran",
        "Perl",
        "Ruby",
        "Python",
        "Scratch",
        "Erlang"
      ],
      panelIndex: 4,
      selectedIndex: 0,
      panels: [
        {title: "Title1", content: "Content1"},
        {title: "Title2", content: "Content2"},
        {title: "Title3", content: "Content3"}
      ],
      calendarValue: new Date(),
      firstDay: 0,
      collapsed: false,
      menus: [
        {
          text: "Item1",
          iconCls: "icon-sum",
          state: "open",
          children: [
            {
              text: "Option1"
            },
            {
              text: "Option2"
            },
            {
              text: "Option3",
              children: [
                {
                  text: "Option31"
                },
                {
                  text: "Option32"
                }
              ]
            }
          ]
        },
        {
          text: "Item2",
          iconCls: "icon-more",
          children: [
            {
              text: "Option4"
            },
            {
              text: "Option5"
            },
            {
              text: "Option6"
            }
          ]
        }
      ],
      sideMenuWidth: 200,
      comboGridValue: null,
      comboGridData: [
        {
          code: "FI-SW-01",
          name: "Koi",
          unitcost: 10.0,
          status: "P",
          listprice: 36.5,
          attr: "Large",
          itemid: "EST-1"
        },
        {
          code: "K9-DL-01",
          name: "Dalmation",
          unitcost: 12.0,
          status: "P",
          listprice: 18.5,
          attr: "Spotted Adult Female",
          itemid: "EST-10"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 38.5,
          attr: "Venomless",
          itemid: "EST-11"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 26.5,
          attr: "Rattleless",
          itemid: "EST-12"
        },
        {
          code: "RP-LI-02",
          name: "Iguana",
          unitcost: 12.0,
          status: "P",
          listprice: 35.5,
          attr: "Green Adult",
          itemid: "EST-13"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 158.5,
          attr: "Tailless",
          itemid: "EST-14"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 83.5,
          attr: "With tail",
          itemid: "EST-15"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 23.5,
          attr: "Adult Female",
          itemid: "EST-16"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 89.5,
          attr: "Adult Male",
          itemid: "EST-17"
        },
        {
          code: "AV-CB-01",
          name: "Amazon Parrot",
          unitcost: 92.0,
          status: "P",
          listprice: 63.5,
          attr: "Adult Male",
          itemid: "EST-18"
        }
      ],
      tagBoxValue: '',
      tagBoxData: [{id:1,text:"Apple"}, {id:2,text:"Orange"}],
      received: '',
      shared: '',
      subscribed: '',
      virtualScrollTotal: 10000,
      virtualScrollPageSize: 10,
      virtualScrollData: [],
      virtualScrollRowHeight: 60,
      virtualScrollItems: [],
      searchBoxValue: ''
    }
  },
  mounted() {
    this.axios({
      method: 'get',
      url: 'http://10.3.0.48:8090/user/list'
    }).then(response => (this.User = response.data))
  },
  created() {
    this.loadPage(this.pageNumber, this.pageSize);
    for(let i=0; i<this.total; i++){
      this.virtualScrollData.push({
        id: i,
        name: 'name'+i,
        addr: 'address'+i,
        desp: 'description'+i
      });
    }
  },
  methods: {
    alert2(msg) {
      this.$messager.alert({
        title: "Info",
        icon: "info",
        msg: msg
      });
    },
    confirm2(msg) {
      this.$messager.confirm({
        title: "Confirm",
        msg: msg,
        result: r => {
          if (r) {
            alert("confirmed: " + r);
          }
        }
      });
    },
    prompt2(msg) {
      this.$messager.prompt({
        title: "Prompt",
        msg: msg,
        result: r => {
          if (r) {
            alert("you type: " + r);
          }
        }
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {

      })
    },
    treeSelectChange(node) {

      this.treeValue = node.text
    },
    onPageChange(event) {
      this.loadPage(event.pageNumber, event.pageSize);
    },
    loadPage(pageNumber, pageSize) {
      this.loading = true;
      setTimeout(() => {
        let result = this.getData(pageNumber, pageSize);
        this.total = result.total;
        this.pageNumber = result.pageNumber;
        this.data = result.rows;
        this.loading = false;
      }, 200);
    },
    getData(pageNumber, pageSize) {
      let total = 100000;
      let data = [];
      let start = (pageNumber - 1) * pageSize;
      for (let i = start + 1; i <= start + pageSize; i++) {
        let amount = Math.floor(Math.random() * 1000);
        let price = Math.floor(Math.random() * 1000);
        data.push({
          inv: "Inv No " + i,
          name: "Name " + i,
          amount: amount,
          price: price,
          cost: amount * price,
          note: "Note " + i
        });
      }
      return {
        total: total,
        pageNumber: pageNumber,
        pageSize: pageSize,
        rows: data
      };
    },
    add() {
      if (this.panels.length >= 6) {
        return;
      }
      this.panels.push({
        title: "Title" + this.panelIndex,
        content: "Content" + this.panelIndex
      });
      this.$nextTick(() => {
        this.selectedIndex = this.panels.length - 1;
        this.panelIndex++;
      });
    },
    remove() {
      let index = this.$refs.acc.getSelectedIndex();
      this.panels.splice(index, 1);
      this.selectedIndex = 0;
    },
    calendarChange(date) {
    },
    sideMenuToggle() {
      this.collapsed = !this.collapsed
      this.width = this.collapsed ? 50 : 200
    },
    virtualScrollUpdate(){

    },
    searchBoxOnSearch(event){
      debugger
    }
  },
  filters: {
    formatDate(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return [m, d, y].join("/");
    }
  }
}


</script>

<style scoped>

</style>

